<template>
  <div>
      <button @click="isShow=true">点我弹窗</button>
      <teleport to='body'>
          <div v-if="isShow" class="mask">
            <div  class="dialog">
                <h1>我是弹窗</h1>
                <h4>12</h4>
                <button @click="isShow=false">关闭弹窗</button>
            </div>
          </div>
      </teleport>
      
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
    name:'Dialog',
    setup(){
        let isShow = ref(false)
        return {isShow}
    }
}
</script>

<style>

    .mask{
        position: absolute;
        top: 0;bottom: 0;left: 0;right: 0;
        background-color: aqua;
    }

    .dialog{
        width: 300px;
        height: 300px;
        background-color: rgb(119, 0, 255);
    }
</style>